<template>
	<div class="shopcart-container">
		<!-- 收货地址区域 -->
		<van-cell title="收货地址" is-link :to="{ path:'/addressList',query:{addressId:address.id}}">
			<template #label>
				<van-row>姓名：{{address.name}}</van-row>
				<van-row>电话：{{address.tel}}</van-row>
				<van-row>地址：{{address.city + address.county + address.address_detail}}</van-row>
			</template>
		</van-cell>

		<!-- 商品列表 -->
		<div>
			<van-card v-for="item in goodsList" :key="item.id" :num="item.count" :price="item.price" :title="item.name"
				:desc="item.title" :thumb="APIDomainName + item.pic" />

		</div>

		<!-- 配送信息 -->
		<div>
			<van-cell title="配送服务" label="快递运输,工作日、双休日与节假日均可送货" />
			<van-field v-model="remark" rows="2" autosize label="订单备注" type="textarea" placeholder="请输入订单备注" />
		</div>

		<!-- 运费信息 -->
		<van-cell title="商品金额" :value="`¥${amount.toFixed(2)}`" />
		<van-cell title="运费" :value="`¥0.00`" />
		<van-cell title="总价" :value="`¥${amount.toFixed(2)}`" />

		<!-- 创建订单按钮 -->
		<van-button @click="OnClickCreateOrder" size="large" type="primary">创建订单</van-button>
	</div>
</template>

<script>
	import { showToast } from "vant";
	import { createOrderAPI } from "@/api/order.js";
	import { getDefaultAddressAPI } from "@/api/address.js";
	import { getCartListCheckedAPI } from "@/api/cart.js";

	export default {
		data() {
			return {
				goodsList: [],
				remark: "",
				amount: 0,
				address: {},
			};
		},

		created() {
			if (this.$route.query.addressId) {
				//通过路由名 addressList 转来的
				this.address.id = this.$route.query.addressId;
			}

			this.initDefaultAddress(); //初始默认收货地址
			this.initCartListByChecked(); //初始订单商品（购物车勾选商品）
		},

		methods: {
			//初始订单商品（购物车勾选商品）
			initCartListByChecked() {
				getCartListCheckedAPI().then(result => {
					this.goodsList = result.data;
					this.amount = 0;
					this.goodsList.forEach((item) => {
						this.amount += item.count * item.price;
					});
				});
			},

			//初始默认收货地址
			initDefaultAddress() {
				getDefaultAddressAPI(this.address.id).then(result => {
					if (result.data.length == 1) {
						this.address = result.data[0];
					} else {
						//如果没有默认收货地址，提示后导航到地址列表页面（该页面还未实现）
						showToast("请先添加收货地址");
						this.$router.replace({
							name: "addressList",
							params: { addressId: 9999999999 }
						});
					}
				});
			},

			//处理创建订单
			OnClickCreateOrder() {
				let productList = [];
				this.goodsList.forEach((item) =>
					productList.push({
						product_id: item.product_id,
						count: item.count,
						price: item.price,
					})
				);

				//根据接口文档，准备接口参数
				let params = {
					address_id: this.address.id,
					productList: productList,
					remark: this.remark,
				};

				createOrderAPI(params).then(result => {
					showToast(result.msg);
					//创建成功后导航到订单列表页面（该页面还未实现）
					this.$router.push({ name: "orderList" });
				});
			},
		},
	};
</script>

<style lang="less" scoped>
	.shopcart-container {
		background: #eee;

		// 收货地址
		.address-container {
			background-color: #f5f5f5;
			margin: 0;
			padding: 10px;
		}
	}

	/deep/.van-card__title {
		font-size: 16px;
	}

	/deep/.van-card__content {
		justify-content: center;
	}
</style>